{include file="header/index" /}
<div class="container whitebg">
	<form class="form-inline mt15 mb15">
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="operation" placeholder="请输入运营中心名称">
		</div>
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="name" placeholder="请输入联系人">
		</div>
		<div class="form-group mr20">
			<input type="text" class="form-control input-min" id="phone" placeholder="请输入联系电话">
		</div>
		<div class="form-group mr20">
			<label>负责区域</label>
			<select name="" class="form-control input-min" id="administrative">
				<option value="">请选择区域</option>
				{volist name="operation" id="op"}
				<option value="{$op.province_id}">{$op.province_name}</option>
				{/volist}

			</select>
		</div>
	</form>
	<form class="form-inline mt15 mb15">
		<div class="form-group">
			<label>起止时间</label>
			<input class="form-control input-time" type="text" id="datetimeStart" readonly class="form_datetime">
			<input class="form-control input-time" type="text" id="datetimeEnd" readonly class="form_datetime">
		</div>
		<button type="button" id="but" class="btn btn-default ml30 input-Btn">搜索</button>
		<button type="button" id="resetbtn" class="btn btn-reset ml30 input-Btn">清空</button>
		<button type="button" id="add" class="btn btn-primary fr colorwhite input-Btn">
							<a href="{:url('Operationmanagement/AddOperation')}">
								<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增运营中心
							</a>
						</button>
	</form>

	<table class="table table-bordered">
		<tr>
			<th><input type="checkbox" onclick="checkAll(this,'box')" id="all" /></th>
			<th>运营中心名称</th>
			<th>联系人</th>
			<th>联系电话</th>
			<th>负责区域</th>
			<th>行政区域数量</th>
			<th>创建时间</th>
			<th>操作</th>
		</tr>

		<script id="list-template" type="text/html">
			{{# for(var i=0;i
			<d.length;i++){ }} <tr>
				<td><input class="select" type="checkbox" name="box" value="{{d[i].o_id}}" onclick="selectAll('box','all')" /></td>
				<td>{{d[i].company_name}}</td>
				<td>{{d[i].name}}</td>
				<td>{{d[i].phone}}</td>
				<td>{{d[i].province_name}}</td>
				<td>{{d[i].Administrative_number}}</td>
				<td>{{d[i].add_time}}</td>
				<td>
					<a href="{:url('Operationmanagement/details')}?id={{d[i].o_id}}">查看</a>
					<a href="{:url('Operationmanagement/editOperation')}?id={{d[i].o_id}}">修改</a>
					<!--<a onclick="bindAccountOperation({{d[i].o_id}})" class="pointer" data-toggle="modal" data-target="#Operationcenter_bind" style="font-weight: normal;">绑定</a>-->
				</td>
				</tr>
				{{# } }}
		</script>
		<tbody id="list-content"></tbody>
	</table>
	<div class="clearfix" style="float:right;margin: 0 auto;">
		<span class="fl mr5 mt5" id="count">共{$count}条数据，</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
	</div>
	<!-- 加载动画 -->
	<div class="spiner-example">
		<div class="sk-spinner sk-spinner-three-bounce">
			<div class="sk-bounce1"></div>
			<div class="sk-bounce2"></div>
			<div class="sk-bounce3"></div>
		</div>
	</div>

	<div class="batchdelbtn pointer" onclick="delmseeage('是否删除所有选中的信息','box')">批量删除</div>
	<div class="clearfix"></div>

	<!--</div>
			</div>-->
	<input type="hidden" id="hidden_operation" name="hidden_operation" value="">
	<input type="hidden" id="hidden_name" name="hidden_operation" value="">
	<input type="hidden" id="hidden_administrative" name="hidden_operation" value="">
	<input type="hidden" id="hidden_datetimeStart" name="hidden_operation" value="">
	<input type="hidden" id="hidden_datetimeEnd" name="hidden_operation" value="">
	<input type="hidden" id="hidden_phone" name="hidden_operation" value="">
</div>
</body>

</html>
<script type="text/javascript">
	$('#resetbtn').click(function() {
		layer.msg('清空成功', {
			time: 1000,
			icon: 1
		})
		for(var i = 0; i < $('.container form').length; i++) {
			$('.container form')[i].reset();
		}
	})

	$("#add").click(function() {
		window.location.href = "{:url('Operationmanagement/editOperation')}";
	})
	//日期选择
	$("#datetimeStart").datetimepicker({
		language: 'cn',
		format: "yyyy-mm-dd",
		autoclose: true,
		minView: "month",
		maxView: "decade",
		todayBtn: true,
		pickerPosition: "bottom-left"
	}).on("click", function(ev) {
		$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
	});
	$("#datetimeEnd").datetimepicker({
		language: 'cn',
		format: "yyyy-mm-dd",
		autoclose: true,
		minView: "month",
		maxView: "decade",
		todayBtn: true,
		pickerPosition: "bottom-left"
	}).on("click", function(ev) {
		$("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
	});
	//运营中心
	Ajaxpage();

	function Ajaxpage(curr) {
		var operation = $("#hidden_operation").val();
		var name = $("#hidden_name").val();
		var administrative = $("#hidden_administrative").val();
		var datetimeStart = $("#hidden_datetimeStart").val();
		var datetimeEnd = $("#hidden_datetimeEnd").val();
		var phone = $("#hidden_phone").val();
		if(administrative == '请选择区域') {
			administrative = '';
		}
		$.getJSON("{:url('Operationmanagement/index')}", {
			page: curr || 1,
			phone: phone,
			datetimeStart: datetimeStart,
			datetimeEnd: datetimeEnd,
			name: name,
			company_name: operation,
			province_name: administrative
		}, function(data) {
			//            console.log(data);
			$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
			if(data.data == '') {
				$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
				$('#count').html("共" + data.page.count + "条数据");
				$("#allpage").remove();
				$("#AjaxPage").remove();
			} else {
				var tpl = document.getElementById('list-template').innerHTML;
				laytpl(tpl).render(data.data, function(html) {
					document.getElementById('list-content').innerHTML = html;
					$('#count').html("共" + data.page.count + "条数据");
				});
				laypage({
					cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
					pages: data.page.allpage, //总页数
					skip: true, //是否开启跳页
					skin: '#337ab7', //分页组件颜色
					curr: curr || 1,
					first: '首页', //若不显示，设置false即可
					last: '尾页', //若不显示，设置false即可
					groups: 3, //连续显示分页数
					jump: function(obj, first) {
						if(!first) {
							Ajaxpage(obj.curr)
						}
						$('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
						inputlength();
					}
				});
			}
		});
	}
	//-------------------------------------------------------------------
	//搜索
	$('#but').click(function() {
		$("#hidden_operation").val($("#operation").val());
		$("#hidden_name").val($("#name").val());
		$("#hidden_administrative").val($('#administrative option:selected').text());
		$("#hidden_datetimeStart").val($("#datetimeStart").val());
		$("#hidden_datetimeEnd").val($("#datetimeEnd").val());
		$("#hidden_phone").val($("#phone").val());
		Ajaxpage();
	});

	//批量删除弹窗
	function delmseeage(txt, who) {
		layer.alert(txt, {
			btn: ['确认', '取消'], //按钮

		}, function() {
			del(who);
			layer.open({
				content: '删除成功',
				time: 1
			});
		});
	}

	function del(who) {
		//        console.log(who);
		var str = [];
		$.each($('input[name="' + who + '"]:checkbox:checked'), function() {
			str.push($(this).val());
		});
		//		console.log(str);
		$.get("{:url('Operationmanagement/delete')}", {
			data: str,
			type: who
		}, function(flag) {
			//            console.log(flag);
			//            return false;
			//删除后，对应的板块更新
			if(who == "box") {
				if(flag.code == 1) {
					layer.msg(flag.msg, {
						icon: 1,
						time: 2000
					}, function() {
						Ajaxpage();
					});
				} else {
					layer.msg(flag.msg, {
						icon: 2,
						time: 2000
					}, function() {});
				}
			}
		})
	}

	function delselected(obj) {
		$('.select').each(function() {
			if($(this).is(':checked')) {
				$(this).parents('tr').remove();
			}
		})
	}

	//复选框选中
	function checkAll(obj, name) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName(name);
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}

	function selectAll(name, id) {
		//获取name=box的复选框
		var userids = document.getElementsByName(name);
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById(id).checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById(id).checked = false;
		}
	}
</script>